$(function () {
    //获取传参
    var pointId=GetUrlParam("pointId");
    vm.getPointInfo(pointId);
    vm.getDataWeatherStationByPointId(pointId);
    vm.getDataVisibilityByPointId(pointId);
    vm.getDataRoadDetectorByPointId(pointId);
    vm.getRoadDetectorChart(pointId);
    vm.getWeatherStationChart(pointId);
    vm.loadView(pointId);

});
function GetUrlParam(paraName) {
    var url = document.location.toString();
    var arrObj = url.split("?");

    if (arrObj.length > 1) {
        var arrPara = arrObj[1].split("&");
        var arr;

        for (var i = 0; i < arrPara.length; i++) {
            arr = arrPara[i].split("=");

            if (arr != null && arr[0] == paraName) {
                return arr[1];
            }
        }
        return "";
    }
    else {
        return "";
    }
}

var rDataTime=[];
var rRoadSurfaceTemp=[];
var rFriction=[];
var rWaterFilmHeight=[];
var wDataTime=[];
var wAmbientTemp=[];
var wWindSpeed=[];

var vm = new Vue({
	el:'#rrapp',
	data:{
        lhpInstallationPoint:{},
        lhpDataRoadDetector:{
            roadSurfaceTemp:null,
            friction:null,
            roadCondition:null,
            salineConcentrationNacl:null,
            icePercentage:null,
            freezingTempNacl:null,
            waterFilmHeight:null
        },
        lhpDataVisibility:{
            visibility:null
        },
        lhpDataWeatherStation:{
            realtime:"-",
            ambientTemp:"-",
            relativeHumidity:"-",
            windSpeed:"-"
        }
	},
	methods: {
        getPointInfo: function(id){//安装点信息
            $.get(baseURL + "baseinfo/lhpinstallationpoint/info/"+id, function(r){
                vm.lhpInstallationPoint = r.lhpInstallationPoint;
                //获取操作日志
                vm.oplog(vm.lhpInstallationPoint.pointCode);
                //查询液位 设备状态
                querylogWater();
                setInterval("querylogWater();", 1200);

            });
        },
        getDataRoadDetectorByPointId:function (pointId) {//路面探测器数据
            $.get(baseURL + "baseinfo/lhpdataroaddetector/getDataRoadDetectorByPointId/"+pointId, function(r){
                if(r.lhpDataRoadDetector!=null){
                    vm.lhpDataRoadDetector = r.lhpDataRoadDetector;
                }
            });
        },
        getDataVisibilityByPointId:function (pointId) {//能见度数据
            $.get(baseURL + "baseinfo/lhpdatavisibility/getDataVisibilityByPointId/"+pointId, function(r){
                if(r.lhpDataVisibility!=null){
                    vm.lhpDataVisibility = r.lhpDataVisibility;
                }
            });
        },
        getDataWeatherStationByPointId:function (pointId) {//气象站数据
            $.get(baseURL + "baseinfo/lhpdataweatherstation/getDataWeatherStationByPointId/"+pointId, function(r){
                vm.lhpDataWeatherStation = r.lhpDataWeatherStation;
                if(vm.lhpDataWeatherStation.source=='0'){
                    $('#tubiao').attr("src","../../statics/image/point.png");
                }else if(vm.lhpDataWeatherStation.source=='1'){
                    $('#tubiao').attr("src","../../statics/image/leida.png");
                }
            });
        },
        getRoadDetectorChart:function (pointId) {//地面探测器数据chart
            $.get(baseURL + "baseinfo/lhpdataroaddetector/roadDetectorChart/"+pointId, function(roadList){
                  for(var i=0;i<roadList.length;i++){
                      var crtTime = new Date(roadList[i].dataTime);
                      rDataTime.push( dateFtt("hh:mm",crtTime));
                      rRoadSurfaceTemp.push(roadList[i].roadSurfaceTemp);
                      rFriction.push(roadList[i].friction);
                      rWaterFilmHeight.push(roadList[i].waterFilmHeight);
                  }
                echarts1();
            });
        },
        getWeatherStationChart:function (pointId) {//气象站数据chart
            $.get(baseURL + "baseinfo/lhpdataweatherstation/weatherStationChart/"+pointId, function(wList){
                for(var i=0;i<wList.length;i++){
                    var crtTime = new Date(wList[i].dataTime);
                    wDataTime.push(dateFtt("hh:mm",crtTime));
                    wAmbientTemp.push(wList[i].ambientTemp);
                    wWindSpeed.push(wList[i].windSpeed);
                }
                echarts2();
            });
        },
        loadView: function(pointId) {//监控视频
            //判断是否ie
            var iv = IEVersion();
            if (iv == -1) {
                $("#dlFrm").attr("src", "../../modules/baseinfo/video.html?pointId="+pointId);
            } else {
                $("#dlFrm").attr("src", "http://47.100.79.18:90/openapi/demo/binrun/myview.html?pid="+pointId);
            }
        },
        oplog:function (pointCode) {
            $.get(baseURL + "baseinfo/lhprfplog/getByPointCode/"+pointCode, function(r){
                var data=r.logList;
                if (data.length > 1) {
                    for (var i = 0; i < data.length; i++) {
                        $("#logWater").append("<div style='color:#1FE8F0;'><span>时间：</span><span>" + data[i].logTime + " </span> <span style='padding-left:10px;'>" + data[i].logContent + "</span></div>");
                    }
                }
            });
        }
	}
});

//时间格式化
function dateFtt(fmt,date)
{ //author: meizz
    var o = {
        "M+" : date.getMonth()+1,     //月份
        "d+" : date.getDate(),     //日
        "h+" : date.getHours(),     //小时
        "m+" : date.getMinutes(),     //分
        "s+" : date.getSeconds(),     //秒
        "q+" : Math.floor((date.getMonth()+3)/3), //季度
        "S" : date.getMilliseconds()    //毫秒
    };
    if(/(y+)/.test(fmt))
        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in o)
        if(new RegExp("("+ k +")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
    return fmt;
}
//判断是否ie
function IEVersion() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion == 7) {
            return 7;
        } else if (fIEVersion == 8) {
            return 8;
        } else if (fIEVersion == 9) {
            return 9;
        } else if (fIEVersion == 10) {
            return 10;
        } else {
            return 6; //IE版本<=7
        }
    } else if (isEdge) {
        return 'edge'; //edge
    } else if (isIE11) {
        return 11; //IE11
    } else {
        return -1; //不是ie浏览器
    }
}

function startPensa() {
    var pCode = vm.lhpInstallationPoint.pointCode;
    var ia = layer.open({
        content : '确定启动喷洒？',
        //skin: 'yourclass',
        closeBtn : 0,
        title : '操作提示',
        //area: ['300px', '200px'],
        btn : [ '确定', '关闭' ],
        yes : function(index, layero) {
            $("#qidongdonghua").attr("src", "../../statics/image/start2_nbc.gif");
            $.get(baseURL + "socket/startPensa/"+vm.lhpInstallationPoint.pointCode, function(data){

            });
            layer.close(ia);
            //statrStatus = 2;
        },
        btn2 : function(index, layero) {
            layer.close(ia);
        },
    });

}
function stopPensa() {
    var pCode = vm.lhpInstallationPoint.pointCode;
    if (2 == 1) {
        var ia = layer.open({
            content : '请先启动喷洒！',
            //skin: 'yourclass',
            closeBtn : 0,
            title : '操作提示',
            //area: ['300px', '200px'],
            btn : [ '确定' ],
            yes : function(index, layero) {
                layer.close(ia);
            }
        });
    } else {
        var ia = layer.open({
            content : '确定停止喷洒？',
            //skin: 'yourclass',
            closeBtn : 0,
            title : '操作提示',
            //area: ['300px', '200px'],
            btn : [ '确定', '关闭' ],
            yes : function(index, layero) {
                $("#qidongdonghua").attr("src", "../../statics/image/stop2_nbc.png");
                $.get(baseURL + "socket/stopPensa/"+vm.lhpInstallationPoint.pointCode, function(data){

                });

                layer.close(ia);
                //statrStatus = 1;
            },
            btn2 : function(index, layero) {
                layer.close(ia);
            },
        });
    }
}

function querylogWater() {
    $.get(baseURL + "socket/refreshWater/"+vm.lhpInstallationPoint.pointCode, function(data){
       // console.log(data)
       /* console.log(data.ddfK+"diandongfakai");
        console.log(data.ddfGdw+"diandongfaguandaowei");
        console.log(data.status+"shebeizuangtai");
        console.log(data.ddfKdw+"diandongfakaidaowei");
        console.log(data.ddfG+"diandongfaguanwei");
        console.log(data.systemStatus+"xitongzhaungtai");
        console.log(data.bpqStatus+"bianpinqizhuangtai");
        console.log(data.ptNum+"pentouhao");*/
        if(data.yewei != null && data.yewei !=""){
            $("#yeweiLevel").html(data.yewei);
            var height1 = data.yewei.split("米")[0];
            var heig=(height1/2)*100;
            $("#yeweitu").css("height",heig+"%");
        }
        if(data.status != null && data.status !=""){
            $("#shebeizhuangtai").html(data.status);
        }
        if(data.ddfK != null && data.ddfK !=""){
            if(data[0].ddfK == 1){
                $("#ddfk").attr("src","../../statics/image/start1_nbc.png");
            }else{
                $("#ddfk").attr("src","../../statics/image/stop1_nbc.png");
            }
        }
        if(data.ddfKdw != null && data.ddfKdw !=""){
            if(data.ddfKdw == 1){
                $("#ddfkdw").attr("src","../../statics/image/start1_nbc.png");
            }else{
                $("#ddfkdw").attr("src","../../statics/image/stop1_nbc.png");
            }
        }
        if(data.ddfG != null && data.ddfG !=""){
            if(data.ddfG == 1){
                $("#ddfg").attr("src","../../statics/image/start_nbc.png");
            }else{
                $("#ddfg").attr("src","../../statics/image/stop_nbc.png");
            }
        }
        if(data.ddfGdw != null && data.ddfGdw !=""){
            if(data.ddfGdw == 1){
                $("#ddfgdw").attr("src","../../statics/image/start_nbc.png");
            }else{
                $("#ddfgdw").attr("src","../../statics/image/stop_nbc.png");
            }
        }
        if(data.systemStatus != null && data.systemStatus !=""){
            if(data.systemStatus == 0){
                $("#systemstatus").attr("src","../../statics/image/kaiguan1_nbc.png");
            }else{
                $("#systemstatus").attr("src","../../statics/image/kaiguan2_nbc.png");
            }
        }
        if(data.bpqStatus != null && data.bpqStatus !=""){
            if(data.bpqStatus == 1){
                $("#bpqstatus").attr("src","../../statics/image/on_nbc.png");
            }else{
                $("#bpqstatus").attr("src","../../statics/image/off_nbc.png");
            }
        }
        if(data.ptNum != null && data.ptNum !=""){
            $("#ptnum").html(data[0].ptNum);
        }
    });
}


function echarts1(){
    var myChart1 = echarts.init(document.getElementById('chart1'));
    var colors = [ '#5793f3', '#d14a61', '#675bba' ];
    option1 = {
        color : colors,
        tooltip : {
            trigger : 'axis',
        },
        grid : {
            left : 30,
            right : 80,
            top : 45,
            bottom : 40
        },

        legend : {
            data : [ {
                name : '路面温度',
                textStyle : {
                    color : "#ffffff"
                }
            },
                {
                    name : '湿滑程度',
                    textStyle : {
                        color : "#ffffff"
                    }
                },
                {
                    name : '水膜厚度',
                    textStyle : {
                        color : "#ffffff"
                    }
                }
            ]
        },
        xAxis : [
            {
                splitLine : {
                    show : false
                },
                splitArea : {
                    show : false
                },
                type : 'category',
                axisLine : {
                    lineStyle : {
                        color : 'white',
                        width : 1
                    }
                },
                axisLabel : {
                    interval : 2,
                    rotate : 40
                },
                axisTick : {
                    alignWithLabel : true
                },
                data : rDataTime
            }
        ],
        yAxis : [

            {
                splitLine : {
                    show : false
                },
                splitArea : {
                    show : false
                },
                type : 'value',
                name : '路面温度',
                // min: 0,
                //max: 60,
                position : 'left',
                axisLine : {
                    lineStyle : {
                        color : colors[0]
                    }
                },
                axisLabel : {
                    formatter : '{value}'
                }
            },
            {
                splitLine : {
                    show : false
                },
                splitArea : {
                    show : false
                },
                type : 'value',
                name : '湿滑程度',
                min : 0,
                max : 1,
                position : 'right',
                axisLine : {
                    lineStyle : {
                        color : colors[1]
                    }
                },
                axisLabel : {
                    formatter : '{value}'
                }
            },
            {
                splitLine : {
                    show : false
                },
                splitArea : {
                    show : false
                },
                type : 'value',
                name : '水膜厚度',
                position : 'right',
                offset : 50,
                axisLine : {
                    lineStyle : {
                        color : colors[2]
                    }
                },
                axisLabel : {
                    formatter : '{value}'
                }
            }
        ],
        series : [
            {
                name : '路面温度',
                type : 'line',
                yAxisIndex : 0,
                data : rRoadSurfaceTemp
            },
            {
                name : '湿滑程度',
                type : 'line',
                yAxisIndex : 1,
                data : rFriction
            },
            {
                name : '水膜厚度',
                type : 'line',
                yAxisIndex : 2,
                data : rWaterFilmHeight
            }
        ]
    };
    myChart1.setOption(option1);
}

function echarts2(){
    var myChart3 = echarts.init(document.getElementById('chart2'));
    var colors = [ '#5793f3', '#d14a61', '#675bba' ];
    option3 = {
        color : colors,
        tooltip : {
            trigger : 'axis',
        },
        grid : {
            left : 40,
            right : 30,
            top : 45,
            bottom : 40
        },

        legend : {
            data : [
                {
                    name : '空气温度',
                    textStyle : {
                        color : "#ffffff"
                    }
                },
                {
                    name : '风速',
                    textStyle : {
                        color : "#ffffff"
                    }
                }
            ]
        },
        xAxis : [
            {
                splitLine : {
                    show : false
                },
                splitArea : {
                    show : false
                },
                type : 'category',
                axisLine : {
                    lineStyle : {
                        color : 'white',
                        width : 1
                    }
                },
                axisLabel : {
                    interval : 2,
                    rotate : 40
                },
                axisTick : {
                    alignWithLabel : true
                },
                data : wDataTime
            }
        ],
        yAxis : [

            {
                splitLine : {
                    show : false
                },
                splitArea : {
                    show : false
                },
                type : 'value',
                name : '空气温度',
                //min: 0,
                // max: 1,
                position : 'left',
                axisLine : {
                    lineStyle : {
                        color : colors[0]
                    }
                },
                axisLabel : {
                    formatter : '{value}℃'
                }
            },
            {
                splitLine : {
                    show : false
                },
                splitArea : {
                    show : false
                },
                type : 'value',
                name : '风速（m/s）',
                position : 'right',
                //offset: 50,
                axisLine : {
                    lineStyle : {
                        color : colors[1]
                    }
                },
                axisLabel : {
                    formatter : '{value}'
                }
            }
        ],
        series : [
            {
                name : '空气温度',
                type : 'line',
                yAxisIndex : 0,
                data : wAmbientTemp
            },
            {
                name : '风速',
                type : 'line',
                yAxisIndex : 1,
                data : wWindSpeed,
                smooth : true
            }
        ]
    };
    myChart3.setOption(option3);
}